<template>
  <div class="my-assisted-customers-container">
    <!-- 顶部导航栏 -->
    <div class="top-navigation">
      <div class="nav-tabs">
        <div 
          class="nav-tab active"
          @click="switchTab('all')"
        >
          全部
        </div>
        <div 
          class="nav-tab"
          @click="switchTab('number')"
        >
          号码客户
        </div>
        <div 
          class="nav-tab"
          @click="switchTab('jinwei')"
        >
          锦微客户
        </div>
      </div>
      
      <div class="search-section">
        <el-select v-model="searchType" placeholder="按编号" style="width: 100px; margin-right: 8px;">
          <el-option label="按编号" value="number" />
          <el-option label="按姓名" value="name" />
          <el-option label="按电话" value="phone" />
        </el-select>
        <el-input
          v-model="searchKeyword"
          placeholder="请搜索客户"
          :prefix-icon="Search"
          clearable
          style="width: 200px; margin-right: 8px;"
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      </div>
      
      <div class="filter-section">
        <el-button-group>
          <el-button size="small" @click="showAllFilter">全部</el-button>
          <el-dropdown>
            <el-button size="small">
              高级筛选
              <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="showAdvancedFilter">高级筛选</el-dropdown-item>
                <el-dropdown-item @click="showCommonFilter">常用筛选</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </div>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-actions-bar">
      <span class="selected-count">已选中 {{ selectedRows.length }} 项</span>
      <div class="batch-buttons">
        <el-button size="small" @click="handleAddTag">打标签</el-button>
        <el-button size="small" @click="handleCreateTodo">新建待办</el-button>
        <el-button size="small" @click="handleChangeAssistant">改协助人</el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        empty-text="无数据"
      >
        <el-table-column type="selection" width="48" />
        
        <el-table-column prop="name" label="姓名" min-width="120">
          <template #default="{ row }">
            <div class="name-cell">
              <span class="name-text">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="customerType" label="客户类型" width="120">
          <template #default="{ row }">
            <el-tag size="small" :type="getCustomerTypeTag(row.customerType).type">
              {{ row.customerType }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="assistStage" label="助贷阶段" width="120">
          <template #default="{ row }">
            <span>{{ row.assistStage }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="aiIntentLevel" label="AI意向等级" width="120">
          <template #default="{ row }">
            <span>{{ row.aiIntentLevel || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="expectedAmount" label="期望金额" width="120">
          <template #default="{ row }">
            <span>{{ row.expectedAmount }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="customerSituation" label="客户情况" min-width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ row.customerSituation }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="infoSource" label="信息来源" width="160">
          <template #default="{ row }">
            <span>{{ row.infoSource }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="marketingSpecialist" label="营销专员" width="120">
          <template #default="{ row }">
            <span>{{ row.marketingSpecialist || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="customerTag" label="客户标签" width="120">
          <template #default="{ row }">
            <span>{{ row.customerTag || '-' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="entryTime" label="录入时间" width="160" sortable="custom">
          <template #default="{ row }">
            <span>{{ row.entryTime }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="设置" width="60" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="handleColumnSettings(row)">
              <el-icon><Setting /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 高级筛选对话框 -->
    <el-dialog v-model="advancedFilterVisible" title="高级筛选" width="600px">
      <el-form :model="filterForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户类型">
              <el-select v-model="filterForm.customerType" placeholder="请选择" clearable>
                <el-option label="潜在客户" value="潜在客户" />
                <el-option label="意向客户" value="意向客户" />
                <el-option label="需求客户" value="需求客户" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="助贷阶段">
              <el-select v-model="filterForm.assistStage" placeholder="请选择" clearable>
                <el-option label="线索" value="线索" />
                <el-option label="沟通" value="沟通" />
                <el-option label="到店" value="到店" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="期望金额">
              <el-select v-model="filterForm.expectedAmount" placeholder="请选择" clearable>
                <el-option label="5~10万元" value="5~10万元" />
                <el-option label="10~30万元" value="10~30万元" />
                <el-option label="30~50万元" value="30~50万元" />
                <el-option label="500~1000万元" value="500~1000万元" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信息来源">
              <el-select v-model="filterForm.infoSource" placeholder="请选择" clearable>
                <el-option label="网络渠道(抖音)" value="网络渠道(抖音)" />
                <el-option label="广告渠道" value="广告渠道" />
                <el-option label="朋友推荐" value="朋友推荐" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="录入时间">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="advancedFilterVisible = false">取消</el-button>
        <el-button type="primary" @click="applyAdvancedFilter">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, ArrowDown, Setting } from '@element-plus/icons-vue'

// 响应式数据
const tableRef = ref()
const searchType = ref('number')
const searchKeyword = ref('')
const selectedRows = ref<any[]>([])
const advancedFilterVisible = ref(false)
const activeTab = ref('all')

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 筛选表单
const filterForm = ref({
  customerType: '',
  assistStage: '',
  expectedAmount: '',
  infoSource: '',
  dateRange: null as [Date, Date] | null
})

// 表格数据
const tableData = ref<any[]>([])

// 模拟数据 - 根据截图显示无数据状态
const mockData: any[] = []

// 获取客户类型标签样式
const getCustomerTypeTag = (type: string) => {
  switch (type) {
    case '潜在客户':
      return { type: 'success', text: type }
    case '意向客户':
      return { type: 'warning', text: type }
    case '需求客户':
      return { type: 'info', text: type }
    default:
      return { type: 'info', text: type }
  }
}

// 获取表格数据
const fetchData = () => {
  // 根据截图显示无数据状态
  tableData.value = mockData
  total.value = 0
}

// 切换顶部标签
const switchTab = (tab: string) => {
  activeTab.value = tab
  currentPage.value = 1
  fetchData()
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 显示全部筛选
const showAllFilter = () => {
  // 重置所有筛选条件
  searchKeyword.value = ''
  filterForm.value = {
    customerType: '',
    assistStage: '',
    expectedAmount: '',
    infoSource: '',
    dateRange: null
  }
  currentPage.value = 1
  fetchData()
}

// 显示高级筛选
const showAdvancedFilter = () => {
  advancedFilterVisible.value = true
}

// 显示常用筛选
const showCommonFilter = () => {
  ElMessage.info('常用筛选功能待实现')
}

// 应用高级筛选
const applyAdvancedFilter = () => {
  advancedFilterVisible.value = false
  currentPage.value = 1
  fetchData()
}

// 分页处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchData()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchData()
}

// 表格选择变化
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 排序处理
const handleSortChange = ({ prop, order }: any) => {
  console.log('排序:', prop, order)
  // 这里可以实现排序逻辑
}

// 批量操作处理
const handleAddTag = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要打标签的客户')
    return
  }
  ElMessage.info(`打标签功能待实现，已选择 ${selectedRows.value.length} 个客户`)
}

const handleCreateTodo = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要创建待办的客户')
    return
  }
  ElMessage.info(`新建待办功能待实现，已选择 ${selectedRows.value.length} 个客户`)
}

const handleChangeAssistant = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要修改协助人的客户')
    return
  }
  ElMessage.info(`改协助人功能待实现，已选择 ${selectedRows.value.length} 个客户`)
}

// 列设置处理
const handleColumnSettings = (row: any) => {
  ElMessage.info(`设置客户: ${row.name}`)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.my-assisted-customers-container {
  padding: 0;
  background-color: #f0f2f5;
  min-height: 100vh;

  // 顶部导航栏
  .top-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
    padding: 0 20px;
    height: 50px;
    color: white;

    .nav-tabs {
      display: flex;
      gap: 0;

      .nav-tab {
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border-bottom: 3px solid transparent;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }

        &.active {
          background-color: rgba(255, 255, 255, 0.2);
          border-bottom-color: white;
        }
      }
    }

    .search-section {
      display: flex;
      align-items: center;

      .el-select,
      .el-input {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 4px;

        :deep(.el-input__inner) {
          background-color: transparent;
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: #333;

          &::placeholder {
            color: #999;
          }
        }

        :deep(.el-input__prefix) {
          color: #666;
        }
      }

      .el-button {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        color: white;

        &:hover {
          background-color: rgba(255, 255, 255, 0.3);
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }

    .filter-section {
      .el-button-group {
        .el-button {
          background-color: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
          color: white;

          &:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
  }

  // 批量操作栏
  .batch-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 20px;
    border-bottom: 1px solid #e6e6e6;

    .selected-count {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }

    .batch-buttons {
      display: flex;
      gap: 8px;
    }
  }

  // 表格容器
  .table-container {
    background: white;
    margin: 0 20px 20px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .name-cell {
      .name-text {
        font-weight: 500;
        color: #303133;
      }
    }

    .pagination-container {
      display: flex;
      justify-content: flex-end;
      padding: 16px 20px;
      border-top: 1px solid #e6e6e6;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .my-assisted-customers-container {
    .top-navigation {
      flex-direction: column;
      height: auto;
      padding: 12px 20px;
      gap: 12px;

      .nav-tabs,
      .search-section,
      .filter-section {
        width: 100%;
        justify-content: center;
      }

      .search-section {
        flex-wrap: wrap;
        gap: 8px;
      }
    }
  }
}

@media (max-width: 768px) {
  .my-assisted-customers-container {
    .top-navigation {
      padding: 12px;

      .nav-tabs {
        .nav-tab {
          padding: 0 12px;
          font-size: 13px;
        }
      }

      .search-section {
        flex-direction: column;
        gap: 8px;

        .el-select,
        .el-input {
          width: 100% !important;
        }
      }
    }

    .batch-actions-bar {
      padding: 12px;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;

      .batch-buttons {
        justify-content: center;
        flex-wrap: wrap;
      }
    }

    .table-container {
      margin: 0 12px 12px 12px;
    }
  }
}
</style>
